<template>
  <div class="xq-form-wrapper">
    <div class="xq-form-search">
      <div class="listbox-action">
        <div style="position: relative">
          <a-range-picker valueFormat="YYYY-MM-DD" v-model="time" style="width: 240px; margin-right: 12px" @change="onGetCrmVisitRecords" />
        </div>
        <div>
          <a-button type="primary" @click="addVisible = true"> 新增记录 </a-button>
        </div>
      </div>
    </div>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        :row-selection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <span v-if="col.dataIndex === 'visitTime'" :key="index">
            {{ moment(text).format("YYYY-MM-DD") }}
          </span>
          <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="onMsg(record)">查看详情</a>
          </span>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <add :visible.sync="addVisible" :val="address" @upDate="upDate" />
    <msg :visible.sync="msgVisible" :msgVal="msgVal" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getCrmVisitRecords } from "../api";
import moment from "moment";
import add from "./component/add";
import msg from "./component/msg";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  components: {
    add,
    msg
  },
  props: {
    address: {
      type: String,
      default: ""
    }
  },
  mixins: [curdMixin],
  data() {
    return {
      addVisible: false,
      msgVisible: false,
      time: [],
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      msgVal: {}
    };
  },
  created() {
    this.onGetCrmVisitRecords();
  },
  methods: {
    moment,
    async onGetCrmVisitRecords() {
      try {
        this.spinning = true;
        const { data } = await getCrmVisitRecords({
          customerId: this.$route.query.id,
          customerName: this.$route.query.name,
          timeStart: this.time[0],
          timeEnd: this.time[1],
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetCrmVisitRecords();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetCrmVisitRecords();
    },
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
    },
    upDate() {
      this.onGetCrmVisitRecords();
      this.visible = false;
    },
    init() {},
    onSearch() {
      this.visible = false;
      this.pageNo = 1;
      this.onGetTalentPoolInfo();
    },
    onClose() {
      this.visible = false;
      this.init();
    },
    onMsg(e) {
      this.msgVisible = true;
      this.msgVal = e;
    }
  }
};
</script>

<style lang="scss" scoped>
.listbox-action {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .search-box {
    padding: 42px 24px 0 24px;
    input {
      width: 80%;
    }
    select {
      width: 80%;
    }
    .search-box-item {
      // margin-right: 24px;
      margin-bottom: 24px;
      p {
        color: #636363;
        font-size: 14px;
        margin-bottom: 12px;
      }
      .input {
        width: 268px;
      }
    }
  }
  .triangle {
    position: absolute;
    top: -30px;
    left: 274px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff;
  }
  .drawer {
    width: calc(100vw - 278px);
    background: #fff;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    z-index: 99;
    height: 196px;
    position: absolute;
    top: 50px;
  }
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.d1 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #4686ff;
  border-radius: 50%;
}
.d2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffbb00;
}
</style>
